* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;

}
.box {
  
    margin: auto;
    position: relative;
    transform:  rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
    /* animation: animate linear 3s infinite; */
    /* transform-origin: center center; */
}


.box div {
    width: 100px;
    height: 100px;
    position: absolute;
    background: #18f64c;
}

.box div:nth-child(2) {
    background-color: green;
    transform:  rotateY(90deg) translateZ(50px) translateX(-50px);
}
@keyframes animate {
    to{
        transform: rotateY(360deg);
    }
}
.box div:nth-child(3) {
    background-color: green;
    transform:  rotateY(90deg) translateZ(-50px) translateX(-50px);
}
.box div:nth-child(4) {
    background-color: rgb(128, 26, 0);
    transform:  rotateX(90deg) translateZ(-50px) translateY(50px);
}
.box div:nth-child(5) {
    background-color: rgb(128, 26, 0);
    transform:  rotateX(90deg) translateZ(50px) translateY(50px);
}
.box div:nth-child(6) {
    background-color: rgb(0, 0, 128);
    transform:   translateZ(100px) ;
}
